<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_608853_ykjxktkf2agojemi.css">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="/static/mui/css/mui.min1.css">
    <link rel="stylesheet" href="/static/jquery-weui/css/weui.min.css">

    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <link rel="stylesheet" href="/static/jquery-weui/css/jquery-weui.css">
    <link rel="stylesheet" href="/static/jquery-weui/css/demos.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <script src="/static/js/vue.js"></script>
    <style>
        .headTitle {
            position: fixed;
            border: 1px solid #f4f4f4;
            border-top: none;
            border-left: none;
            border-right: none;
            background: #fff;
            width: 100%;
            height: 44px;
            line-height: 44px;
        }

        .head {
            position: absolute;
            width: 100%;
            max-width: 640px;
            right: 0;
            margin: 0 auto;
            height: 44px;
            background: rgb(255, 255, 255);
            top: 0;
            left: 0;
            z-index: 3;
        }

        .head .title1 {
            text-align: center;
            font-size: 17px;
            margin: 0 8%;
            font-style: normal;
            font-weight: normal;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 100%;

        }

        .head a img {
            float: left;
            display: block;
            width: 100%;
            width: 10px;
            height: 16px;
            margin-left: 5%;
            margin-top: 14px;
        }

        .goods-details p {
            color: gray;
            font-size: 13px
        }

        .db {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            padding: 0;
            table-layout: fixed;
            border-top: 0;
            border-bottom: 0;
        }
        input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea{
            padding: 0px;
        }


    </style>
</head>
<body>
<header class="head headTitle" style="text-align: center">
    <a class="back" href="{:url('/home/goods/goods')}"><img src="/static/images/back_gray.png" alt="返回"></a>
    <span class="" style="margin-right: 8%">商品详情</span>
</header>
<div id="app">
<!--商品图文开始-->
<div style="background-color: #FFFFFF;margin-top: 45px;width: 100%">
    <div class="mui-card-content" style="border: none;text-align: center">
        {if $item.thumb=='null'}
        <img src="/res/img/thumb.png" style="height:250px;width: 100%;"/>
        {else}
        <img src="{$item.thumb}" style="height:250px;width: 100%;"/>
        {/if}
    </div>
    <div class="mui-card-content">
        <div class="mui-card-content-inner" style="padding: 12px">
            <div class="goods-header">
                <div class="goods-title" style="font-size: 16px;color: #333;">{$item.name}</div>
                <div class="goods-price goods-goods" style="color:gray; font-size: 14px;">
                    <span>品牌：{$item.pinpai.pinpai}</span>
                </div>
                <div class="goods-price goods-goods" style="color:gray; font-size: 14px;">
                    <span> 商家：{$item.shangjia.shop_name}</span>
                </div>
                <div class="goods-other-info" style=" margin: 0 20px 6px 0;color: #666;display: inline-block;
                font-size: 12px; line-height: 20px;">材质：<span>{$item.caizhi}</span>&nbsp;&nbsp;&nbsp;
                    型号：<span>{$item.xinghao}</span>
                </div>
            </div>
        </div>
    </div>
</div>
<!--商品图文结束-->
<!--商品详情-->
<div class="goods-detail-section" id="deriction" style="background-color: #FFFFFF;margin-top: 15px">
    <div class="block-item">
        <div style="border-bottom: 1px solid gainsboro;font-size: 16px;color: #333;height: 40px;">
            <span style="margin-left: 15px;line-height: 40px">产品详情</span></div>
        <div class="goods-details"
             style="margin-top: 8px;color: #000000;padding: 0 10px;line-height: 25px;font-size: 16px;">
            <p>{$item.remarks}</p>
            <!--不可删除，显示nav下边内容-->
            <p style="height: 30px"></p>
        </div>
    </div>
</div>
<!--底部菜单开始-->
<div class="db" style="background-color: #fff;">
    <div class="mui-row">
        <div class="mui-col-sm-8 mui-col-xs-8" style="color:  rgb(237,108,0);line-height: 50px">
            <span style="margin-left: 15px">优惠{$item.discount}折</span>
        </div>
        <div class="mui-col-sm-4 mui-col-xs-4" style="text-align: center;background-color: rgb(237,108,0);">
            <a href="javascript:;" class=" open-popup" style="list-style:none;color: white;"
               data-target="#half">使用优惠券</a>
        </div>
    </div>
</div>
<!--底部菜单结束-->
<!--使用优惠券弹框-->
<div id="half" class='weui-popup__container popup-bottom'>
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">

        <div class="weui-cell">
            <div class="weui-cell__bd">
                <span  style="color: grey">{$item.name}</span>&nbsp&nbsp<span style="color: rgb(237,108,0) ">￥</span>
                <span id="pr" style="color: rgb(237,108,0) ">{$item.price}</span>
            </div>
            <div class="weui-cell__ft">
                <div class="weui-count">
                    <a class="weui-count__btn weui-count__decrease" @click="changeMoney(-1)"></a>
                    <input class="weui-count__number" name="count" style="width: 3rem" type="number" value=""
                      v-model="count"/>
                    <a class="weui-count__btn weui-count__increase" @click="changeMoney(1)"></a>
                </div>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <span style="color: grey;">合计</span>&nbsp&nbsp<span style="color: rgb(237,108,0) ">￥</span>
                <input class="weui-count__number" id="hj" style="width: 4rem;color:rgb(237,108,0);text-align: center " type="number"  :value="countMoney" disabled/>
            </div>
            <div class="weui-cell__ft">
                <span style="color: grey">共优惠</span>&nbsp&nbsp<span style="color: rgb(237,108,0) ">￥</span>
                <input class="weui-count__number" style="width: 4rem;color:rgb(237,108,0);text-align: center"
                       name="doscount_price" type="number" :value="discountMoney" disabled/>
            </div>
        </div>
        <div  style="height: 40px;background-color: #fff;width: 100%">
            <div style="float: left;width: 30%" >
                <a href="javascript:;" style="margin-left: 15px;line-height: 40px;color:  rgb(237,108,0);" class=" close-popup">关闭</a>
            </div>
            <div  style="text-align: center;background-color: rgb(237,108,0);float: right;width: 30%">
                <span onclick="use(this)" style="list-style:none;color: white;line-height: 40px">
                    使用
                </span>
            </div>
        </div>


    </div>
</div>
</div>
</body>
<script>
    // 弹框
    $(document).on("open", ".weui-popup-modal", function () {
        console.log("open popup");
    }).on("close", ".weui-popup-modal", function () {
        console.log("close popup");
    });
    var app = new Vue({
        el: '#app',
        data: {
            count:0,
            discount:"",
            price:"",
            countMoney:0,
            discountMoney:0
        },
        methods:{
            changeMoney:function (way) {
                if(way>0){
                    this.count++;
                }else{
                    this.count--;
                    if(this.count<1){
                        this.count=1;
                    }
                }
                this.math();
            },
            math:function () {
                this.countMoney=(this.price*this.count).toFixed(2);
                this.discountMoney=(this.price*(10-this.discount)*this.count*0.1).toFixed(2);
            }
        }
    });
    app.price="{$item.price}";
    app.discount="{$item.discount}";
    console.log(app.price);

    function use(that) {
        var discountMoney=app.discountMoney;
        var count=app.count;
        var id="{$id}";
        var uid="{$uid}";
        console.log(id);
        console.log(uid);
        console.log(discountMoney);
        console.log(count);
        var s="{:url('home/goods/discount')}?id="+id+"&uid="+uid+"&discountMoney="+discountMoney+"&count="+count;
        location.href=s;

    }

</script>
</html>